<template>
  <el-menu
      active-text-color="#ffd04b"
      background-color="#545c64"
      class="el-menu-vertical"
      default-active="1"
      text-color="#fff"
      @close="handleClose"
      @open="handleOpen"
  >
    <el-row class="demo-avatar demo-basic">
      <div class="block">
        <el-avatar :size="110" :src="squareUrl" class=" " shape="square" @click="toUserInfo"/>
      </div>
    </el-row>
    <el-menu-item index="1" @click="toHomepage">
      <el-icon>
        <setting/>
      </el-icon>
      <span>首页</span>
    </el-menu-item>
    <el-menu-item index="2" @click="toUserInfo">
      <el-icon>
        <User/>
      </el-icon>
      <span>个人信息</span>
    </el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import router from '@/router'
import {useUserInfoStore} from '@/stores/User/UserInfo'

const userInfoStore = useUserInfoStore()

const toHomepage = () => {
  router.push('/home/mainbody')
}
const toUserInfo = () => {
  router.push('/home/userinfo')
}

const squareUrl = ref()

const Head = () => {
  squareUrl.value = userInfoStore.getUserImage()
}
Head()

const handleOpen = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}
</script>
<style scoped>
.block {
  flex: 1;
  text-align: center;
  margin: 60px auto;
}

.el-menu-vertical {
  height: 100%;
}
</style>
